<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" slick-uniqueid="1">
<head>
	<jdoc:include type="head" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Wire Rope Consultancy</title>
	<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/wirerope/css/css.css">
	<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/wirerope/css/style.css">
	<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/wirerope/css/ie.css">
	<![endif]-->
	
	<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/jquery.min.js"></script>
	
	
	<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/jquery.easing.1.3.js"></script>
	<script type="text/javascript">

		jQuery(document).ready(function($) {
			$('.menu li.item-101').hover(
				function () {
				    //show its submenu
				    $('ul', this).stop().slideDown(300);
			 
				},
				function () {
				    //hide its submenu
				    $('ul', this).stop().slideUp(300);         
				}
			);
			
			$('.menu li ul li a').bind('click',function(event){
				var $anchor = $(this);
				
				$('html, body').stop().animate({
				    scrollTop: $($anchor.attr('href')).offset().top
				    }, 1000,'easeInOutExpo');
				    
				    event.preventDefault();
			});
			
			$('.navigator li a').bind('click',function(event){
				var $anchor = $(this);
				
				$('html, body').stop().animate({
				    scrollTop: $($anchor.attr('href')).offset().top
				    }, 1000,'easeInOutExpo');
				    
				    event.preventDefault();
			});
			
			$('img, .block3').hover(
				function () {
				    //show its submenu
				    //$('ul', this).stop().slideDown(300);
				    $('#wrapper').after('<div id="overlay"></div>');
				    $('#overlay').css('top', $(this).offset().top);
				    $('#overlay').css('left', $(this).offset().left);
				    $('#overlay').css('width', $(this).outerWidth());
				    $('#overlay').css('height', $(this).outerHeight());
				    
				    $(this).animate({
					opacity: 0.7,
					//left: '+=50',
					//height: 'toggle'
				      }, 100, function() {
					// Animation complete.
				      });
									
				    //alert('ddd');
			 
				},
				function () {
				    //hide its submenu
				    //$('ul', this).stop().slideUp(300);
				    //alert('eee');
				    //$('#overlay').remove();
				    
				    //$(this).animate({
				//	opacity: 1,
					//left: '+=50',
					//height: 'toggle'
				//      }, 1, function() {
					// Animation complete.
					$(this).css('opacity', '1');
					$('#overlay').remove();
				//      });
				}
			);
			
		});
		
	</script>
</head>
<body>
		
	<div id="wrapper">
		<div id="header">
			<div style="width:960px; margin:0 auto">
				<div id="logo">
					<h1><a href="">Wire Rope Consultancy</a></h1>
				</div>
				<div style="float:right">
					<div id="read-article">
						<p>read article</p>
					</div>
					<jdoc:include type="modules" name="mainmenu" />

				</div>
			</div>
		</div>
		<jdoc:include type="component" />
			
				
	</div><!--Wrapper-->

</body>
</html>